body{background:#eee;margin:0;padding:0}
.example{
	background:#FFF;
	position: relative;
	background-image: url(img/bj_01.jpg);
	background-size: 100%;
}
 

.yue{
	width: 100px;
	height: 100px;
	position: absolute;
	top:50%;left:50%;
	margin: -50px 0px 0px -50px;
	background-image: url(img/yueliang.png);
	background-size: 100%;
	z-index: 99999999;
}
.yue.rotate{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
	-moz-transform:rotateY(360deg);
	-o-transform:rotateY(360deg);
	transition: transform 1s;
	-moz-transition:-moz-transform 1s;
	-webkit-transition: -webkit-transform 1s;

}

.active,.left,.right{
	position: fixed;	
    font-weight: bolder;
    font-family: -webkit-pictograph;
    letter-spacing: 2px;
    font-size: 20px;
	
}
.active{
	/*background-image: url(img/bj_15.jpg);*/
	top: 2%;left:72%;z-index: 9999999;
	color: rgba(255,255,255,0.8);
	font-size: 16px;
}
.left,.right{
	color: #fff;
	width: 100px;
	height: 26px;
	margin: -50px 0px 0px -13px;
	background-size: 100%;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-timing-function:   Linear ;
	-webkit-animation-timing-function:   Linear;
	-moz-animation-timing-function:   Linear;
	z-index: 9999999;
}
.left{
	/*background-image: url(img/bj_15.jpg);*/
	top: 61%;left:-25%;
}
.right{	
	/*background-image: url(img/bj_18.jpg);*/
	top: 61%;left: 110%;
}




.tow {
    transform: rotatex(70deg);
    -webkit-transform: rotatex(70deg);
    -moz-transform: rotatex(70deg);
    position: absolute;
    top:63%;z-index: 1000;
	left: 50%;
	
}


.tow span {
	
	display: block;
	width: 0px;
	height: 0px;
	background-color: transparent;
	color: black;
	text-align: center;
	border-radius: 50%;
	-webkit-border-radius: 50%;
-moz-border-radius: 50%;
	border:2px #1e1f3e solid;
	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	position: absolute;
	box-shadow: 2px 2px 2px #3c2e63;
	
}

